<template>
<div class="login-box">
    <div class="login">
        <template v-if="loginType">
            <div>
              <h2 class="login-title">登录</h2>
                <i-input element-id="userName" class="login-inp" v-model="userName" @on-change="removeErro('userName')" :class="{ 'ivu-form-item-error':userNameError }" placeholder="请输入手机号码/邮箱"></i-input>
                <i-input element-id="passWord" class="login-inp inp-nobtn" v-model.trim="passWord" type="password" @on-change="removeErro('passWord')" :class="{ 'ivu-form-item-error':passWordError }"  placeholder="请输入密码"></i-input>
                <div class="getPass">
                <!--<router-link to="/getCode">忘记密码 ?</router-link>-->
                <nuxt-link to="/getCode">忘记密码 ?</nuxt-link>
                <router-view></router-view>
                </div>
            </div>
        </template>
        <template v-else>
              <h2 class="login-title">登录</h2>
                <i-input class="login-inp" v-bind:maxlength="11" element-id="userName1" v-model="userName1" @on-change="removeErro('userName1')" :class="{ 'ivu-form-item-error':userNameError1 }" placeholder="请输入手机号码"></i-input>
                <div class="send-code">
                    <i-input  element-id="inpCode" v-model.number="inpCode" class="input-set" :class="{ 'ivu-form-item-error':codeError }" placeholder="请输入验证码"></i-input>
                    <button ref="code" class="setMess" :class="{ 'code': code.disabled}" :disabled="code.disabled" @click="Code">{{code.message}}</button>
                </div>
                <div class="getPass"></div>
        </template>

        <div class="login-type">
                <input type="button" value="登录" class="login-btn" @click="loginFn">
        <!-- 第三方登录 -->
            <Row class="tr-login">
                <i-col span="12" class="thirdLgi-l">
                   <i class="icon-qq iconfont" @click="tplogins"></i>
                   <i class="icon-wechat iconfont" @click="tplogin"></i>
                </i-col>
                <i-col span="12" class="thirdLgi-r">
                    <a href="javascript:void(0)" @click="tabLoginFn">{{ loginTypeTxt }}</a>
                </i-col>
            </Row>
            <div>
                <input type="button" value="创建您的五孚账户" class="creat-count" @click='register'>
            </div>
        </div>
    </div>
 </div>
</template>

<script>
// import placeholder from "../page/utils/placeholder";
import { mapMutations } from "vuex";
import axios from 'axios'
export default {
  name: "Login",
  data() {
    return {
      code: {
        disabled: false,
        message: "发送验证码"
      },
      userName: "",
      userName1: "",
      passWord: "",
      inpCode: "",
      loginType: true,
      loginTypeTxt: "手机验证码登录",
      userNameError: false,
      passWordError: false,
      codeError: false
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   placeholder();
    // });
  },
  methods: {
    ...mapMutations(["changeLogin"]),
    /**进行登录方式切换 */
    tabLoginFn: function() {
      let ths = this;

      if (ths.loginType) {
        ths.loginTypeTxt = "账号密码登录";
        ths.loginType = false;
        // ths.$nextTick(() => {
        //   placeholder();
        // });
      } else {
        ths.loginTypeTxt = "手机验证码登录";
        ths.loginType = true;
        // ths.$nextTick(() => {
        //   placeholder();
        // });
      }
    },
    /**提交登陆表单  */
    loginFn: function() {
      let ths = this;
      ths.$Message.destroy();
      if (ths.loginType) {
        //  手机号验证
        if (!ths.userName) {
          ths.$Message.error("手机号码/邮箱不能为空！");
          ths.userNameError = true;
          $("#userName").focus();
          return false;
        } else {
          var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
          var email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
          // 登录手机号（验证：18200399003）
          if (!reg.test(ths.userName) && !email.test(ths.userName)) {
            ths.$Message.error("请输入正确格式的手机号/邮箱");
            ths.userNameError = true;
            $("#userName").focus();
            return false;
          } else {
            var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
            var email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            // 登录手机号（验证：18200399003）
            if (!reg.test(ths.userName) && !email.test(ths.userName)) {
              ths.$Message.error("请输入正确格式的手机号/邮箱");
              ths.userNameError = true;
              $("#userName").focus();
              return false;
            }
          }
          //  密码验证
          if (!ths.passWord) {
            ths.$Message.error("密码不能为空！");
            ths.passWordError = true;
            $("#passWord").focus();
            return false;
          } else {
            var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
            var length = ths.passWord.length;
            // console.log(length);
            if (length <= 7 || length >= 17) {
              ths.$Message.error("密码设置8-16位，请重新输入");
              ths.passWordError = true;
              $("#passWord").focus();
              return false;
            } else {
              if (!reg.test(ths.passWord)) {
                ths.$Message.error("密码设置英文+数字组合，请重新输入");
                ths.passWordError = true;
                $("#passWord").focus();
                return false;
              }
            }
          }
          axios.post('/web/user/userLoginByPwd', {
            phone: ths.userName,
            pwd: ths.passWord
          })
          .then(function (response) {
            console.log(response);
            if (response.data.responseCode === "100000") {
              ths.loginsuccess(data);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
          // ths
          //   .post("/user/userLoginByPwd", {
          //     phone: ths.userName,
          //     pwd: ths.passWord
          //   })
          //   .then(data => {
          //     if (data.responseCode === "100000") {
          //       ths.loginsuccess(data);
          //     }
          //   });
        }
      } else {
        if (!ths.userName1) {
          ths.$Message.error("手机号码不能为空！");
          ths.userNameError1 = true;
          $("#userName1").focus();
          return false;
        } else {
          var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
          // 登录手机号（验证：18200399003）
          if (!reg.test(ths.userName1)) {
            ths.$Message.error("请输入正确格式的手机号");
            ths.userNameError1 = true;
            $("#userName1").focus();
            return false;
          }
        }
        // 验证码验证
        if (!ths.inpCode) {
          ths.$Message.error("验证码不能为空！");
          ths.codeError = true;
          $("#inpCode").focus();
          return false;
        } else {
          var reg = /^[0-9]*$/;
          if (!reg.test(ths.inpCode)) {
            ths.$Message.error("验证码必须是数字");
            ths.codeError = true;
            $("#inpCode").focus();
            return false;
          }
        }
        ths
          .post("/user/userLoginByCode", {
            phone: ths.userName1,
            phonecode: ths.inpCode
          })
          .then(data => {
            if (data.responseCode === "100000") {
              ths.loginsuccess(data);
            }
          });
      }
      // alert("登陆成功");
      // console.log(ths.$parent.$data);
    },
    loginsuccess(data) {
      const ths = this;
      ths.$parent.$data.isUser = true;
      ths.$cookie.set("id", data.result.id);
      ths.changeLogin(true);
      // ths.$store.state.index.loginsucess = true;
      ths.$router.push("/person");
    },
    removeErro: function(name) {
      let ths = this;

      if (name == "userName") {
        ths.userNameError = false;
      }
      if (name == "userName1") {
        ths.userNameError1 = false;
      }
      if (name == "passWord") {
        ths.passWordError = false;
      }
    },
    //发送验证码
    Code: function() {
      const ths = this;
      ths.$Message.destroy();
      if (!ths.userName1) {
        ths.$Message.error("手机号码不能为空！");
        ths.userNameError1 = true;
        $("#userName1").focus();
        return false;
      } else {
        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        // 登录手机号（验证：18200399003）
        if (!reg.test(ths.userName1)) {
          ths.$Message.error("请输入正确格式的手机号");
          ths.userNameError1 = true;
          $("#userName1").focus();
          return false;
        }
      }
      ths.post("/external/loginCode", { phone: ths.userName1 }).then(data => {
        if (data.responseCode === "100000") {
          ths.getCodes(ths.$refs.code);
        }
        // console.log(data);
      });
    },
    getCodes(el) {
      //   this.code.disabled = true;

      let num = 60;
      let timer = setInterval(() => {
        if (num > 1) {
          num--;
          this.code.message = `${num}s后重发`;
        } else {
          clearInterval(timer);
          this.code.message = `发送验证码`;
          this.code.disabled = false;
        }
      }, 1000);
    },
    tplogin() {
      let ths = this;
      ths.$router.push("/qqlogin");
    },
    tplogins() {
      let ths = this;
      ths.$router.push("/wxlogin");
    },
    register() {
      this.$router.push("/register");
    }
  }
};
</script>

<style lang="scss">
body,
html {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}
.login-box {
  width: 1190px;
  margin: 10px auto 40px auto;
  height: 560px;
  border: 1px solid #eeeeee;

  .login {
    width: 406px;
    height: 410px;
    padding: 30px 30px 0 30px;
    margin: 30px auto 120px auto;
    text-align: center;
    box-shadow: 0 0 5px rgba(136, 136, 136, 0.25);
  }
  .login-title {
    font-size: 2rem;
    margin: 0 0 28px 0;
    color: #3a3a3a;
    font-family: "Microsoft YaHei";
    line-height: 16px;
  }

  .login-inp {
    margin-bottom: 28px;
  }
  .inp-nobtn {
    margin-bottom: 0;
  }
  .login-inp input {
    width: 318px;
    height: 38px;
    line-height: 14px;
    font-size: 1.4rem;
    color: #9a9a9a;
    padding-left: 8px;
  }
  .getPass {
    width: 330px;
    height: 42px;
    text-align: right;
    font-size: 1.4rem;
    line-height: 42px;
    // margin: 20px 0 38px 0;
  }
  .getPass a {
    color: #3a3a3a !important;
  }
  .send-code {
    width: 318px;
    margin: 0 auto 0px auto;
  }
  .send-code .input-set {
    //   width:414px;
    display: inline;
  }
  .send-code .input-set input {
    width: 180px;
    height: 38px;
    float: left;
    margin-right: 22px;
    font-size: 1.4rem;
    color:#9a9a9a;
  }
  .setMess {
    width: 114px;
    height: 38px;
    line-height: 38px;
    cursor: pointer;
    color: #3a3a3a;
    border: 1px solid #dddee1;
    background-color: #f6f6f6;
    border-radius: 4px;
    font-size: 1.4rem;
    outline: none;
  }
  .code {
    cursor: no-drop;
  }
  .login-btn {
    background: #ee5054;
    color: #ffffff;
    font-size: 1.8rem;
    width: 318px;
    height: 40px;
    border-radius: 5px;
    box-shadow: 0 5px 8px rgba(238, 80, 84, 0.25); //底部部阴影
    text-align: center;
    cursor: pointer;
  }

  .tr-login {
    margin: 15px 0 15px 0;
    padding: 0 22px;
    // width: 414px;
  }
  .thirdLgi-l i {
    float: left;
    font-size: 50px;
    height: 30px;
    line-height: 30px;
    //visibility: hidden;
  }
  .icon-qq {
    color: #00a3ef;
  }
  .icon-wechat {
    color: #16a524;
  }
  .thirdLgi-r a {
    float: right;
    font-size: 1.4rem;
    color: #3a3a3a !important;
    font-family: "Microsoft YaHei";
  }
  .creat-count {
    width: 318px;
    height: 40px;
    font-size: 1.6rem;
    color: #ee5054;
    border: 1px solid #ee5054;
    background: #ffffff;
    border-radius: 4px;
    cursor: pointer;
  }
}
</style>
